<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-model结合checkbox类型使用</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 1. checkbox单选框 -->
    <label for="agree">
      <input type="checkbox" id="agree" v-model="isAgree"> 同意协议
    </label>
    <h2>您选择的是：{{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>

    <br>
    <br>
    <br>
    <br>

    <!-- 2. 多选框 -->
    爱好：
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    <input type="checkbox" value="跑步" v-model="hobbies">跑步

    <h2>您的爱好是：{{hobbies.toString()}}</h2>

    <br>
    <br>
    <br>

    <!-- 值绑定 -->
    动态获取绑定
    <br>
    爱好：
    <label v-for="(item,index) in originHobbies" :key='index' :for="index" >
      <input type="checkbox" :value="item" :id="index" v-model="hobbies">{{item}}
    </label>

  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        isAgree: false, // 单选
        hobbies: [], // 多选
        originHobbies: ['篮球', '足球', '羽毛球', '跑步', '马拉松']
      },
      methods: {}
    });
  </script>
</body>

</html>